<template>
  <section class="moviceDetails" style="margin-top: 70px;">
     <section class="detail-box">
       <div>
         <img :src="detail.img" alt="People">
       </div>
       <article class="detail-title">
         <h3>{{detail.name}}</h3>
       </article>
       <article class="detail-con">
          <span>
            {{detail.des}}
          </span>
       </article>
     </section>
    <section style="text-align: center">
      <md-button class="md-raised md-dense" href="/home/movice">返回</md-button>
    </section>

  </section>
</template>
<script>
  export default {
    name:'moviceDetails',
    data(){
      return{
        detail:{}
      }
    },
    created(){
     this.$http.get("http://localhost:3000/movice/"+this.$route.params.id)
       .then((response)=>{
          this.detail = response.body;
       })
    }
  }
</script>
<style>
  .detail-box>div{
    width: 250px;
    height: 250px;
    margin:10px auto;
  }
  .details-box>div>img{
    width: 100%;
    height:100%;
  }
  .detail-title {
    text-align: center;
  }
  h3{
    color: #4d4d4d;
  }
  .detail-con{
     padding:5px 30px;
  }
  .detail-con>span{
    text-align:justify
  }
</style>
